<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
  <button id='fit'>Fit to Kenya</button>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "MapZoom.component",
  components: {Mapbox},
  setup() {

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // 使用 fitBounds 来显示所示地图中的一块特定区域，无论地图的像素大小如何。
      document.getElementById('fit').addEventListener('click', function () {
        map.fitBounds([[104.958984, 27.353521], [108.50585, 31.615985]]);
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped lang="scss">
#fit {
  display: block;
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 20%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
  cursor: pointer;
}
</style>